<template>

  <div class="wrap">
    <section class="header">
      <el-row>
        <el-col :span="20">
          <ProductionSteps :active="8" align-center/>
        </el-col>

        <el-col :span="4">
          <div style="display: flex;justify-content: flex-end;margin-right: 30px;padding-top: 10px">
            <el-popover
              placement="bottom"
              v-model="emptyProvVisible"
              width="200">
              <p style="margin-bottom: 10px">请确认是否清空格子？</p>
              <div style="text-align: right; margin: 0">
                <el-button :loading="loadingEmptyCellsBtn" @click="emptyCells" size="mini" type="danger">确定</el-button>
                <el-button @click="emptyProvVisible = false" size="mini" type="info">取消</el-button>
              </div>
              <el-button slot="reference" type="primary">清空格子</el-button>
            </el-popover>

            <a-button :disabled="true" plain size="medium" style="margin-left: 10px" type="danger">返工</a-button>
          </div>
        </el-col>
      </el-row>
    </section>

    <section class="help">
      <HeaderHelpDoc :head-context="headContext"/>
    </section>

    <el-row :gutter="30" class="main-wrap">
      <el-col :span="16" class="main-left">
        <el-row class="scan">

          <el-col class="operator-area">
            <span>
              <span style="padding-right: 30px">
                <el-radio label="1" v-model="radio">产品首尾扫描</el-radio>
              </span>
              <span>
                <span>请扫描SN条码: </span>
                <el-input
                  @keydown.native.enter="scanOrInputBarcode"
                  clearable placeholder="点击此处开始扫描"
                  style="width: 200px" v-loading="loadingScan"
                  v-model="scanBarcode"></el-input>
              </span>
              <span style="padding-left: 30px">下一道工序:</span>
              <span style="padding: 15px">
                <a-button
                  @click="$router.push({name:'shipments'})"
                >包装发货</a-button>
              </span>
                   <span>分拣储位:</span>
            </span>
          </el-col>

          <el-col class="condition-filter">
            <el-input
              @keydown.native.enter="scanOrInputBarcode" clearable
              placeholder="请输入内容" style="width: 300px" suffix-icon="el-icon-search"
              v-model="scanBarcode"></el-input>
            <line-select :value.sync="selectedLineBody" style="margin-left: 30px;width: 230px"/>
          </el-col>

          <el-col class="show-work-sit">
            <work-sit-info :workStationData="workStationData"/>
          </el-col>

          <el-col class="album-grid">

            <!--        sf area    -->
            <el-row class="album-grid-wrap">
              <h2 style="font-size: 17px">顺丰速运区:</h2>
              <el-col :key="cell['GridId']" :span="6"
                      v-for="(cell,idx) in cellList">
                <el-card style="color:#ffffff;background: #1890ff">
                  <div style="display: flex;justify-content: center;font-weight: bolder">{{cell['GridName']}}</div>
                  <div style="padding-top:3px;">订单编码： 130000001641</div>
                  <div style="padding-top:3px;">客户名称： 扬州雅泉相册</div>
                  <div style="padding-top:3px;">&nbsp;&nbsp;&nbsp;&nbsp;产品数：1/3</div>
                </el-card>
              </el-col>
            </el-row>


          </el-col>

        </el-row>
      </el-col>

      <el-col :span="8" class="main-right">
        <!--        <el-tabs type="border-card">-->
        <!--          <el-tab-pane label="可加工的产品">-->
        <section>
          <h3 style="margin-bottom: 5px">异常SN:</h3>
        </section>
        <azure-dynamic-table :column-des-objs="columnDesObjs" :data="tableData"/>
        <section>
          <h3 style="margin: 15px 0 5px 0">过站:</h3>
        </section>
        <azure-dynamic-table :column-des-objs="columnDesObjs" :data="tableData"/>
        <!--          </el-tab-pane>-->
        <!--          <el-tab-pane label="作业指导书">-->
        <!--            作业指导书-->
        <!--          </el-tab-pane>-->
        <!--        </el-tabs>-->
      </el-col>
    </el-row>

  </div>

</template>

<script>
  import ProductionSteps from '@/views/productManagement/aComponents/ProductionSteps'
  import HeaderHelpDoc from '@/components/ATheFridayClub/HeaderHelpDoc'
  import AButton from '@/components/ATheFridayClub/AButton'
  import LineSelect from '@/components/ATheFridayClub/businessRelation/LineSelect'
  import WorkSitInfo from '@/components/ATheFridayClub/businessRelation/WorkSitInfo'
  import {
    cleanProductPhotoGrid,
    getProductGridAutoList,
    scanBoardGridPhoto
  } from '@/api/factoryPresetScan'
  import AzureDynamicTable from '@/components/ATheFridayClub/mDynamicTable/AzureDynamicTable'
  import { ERR_OK } from '@/utils/commons'
  import _ from 'lodash'
  import lineBodyRelate from '@/mixins/lineBodyRelate'

  //  内页册产品分拣 deprecated

  //  选择这个页面改为了产品质检,产品分拣还是用之前的

  export default {
    name: 'insideVolumeProductSorting',
    components: { AzureDynamicTable, WorkSitInfo, LineSelect, AButton, HeaderHelpDoc, ProductionSteps },
    mixins: [lineBodyRelate],

    $_techType: 6, //  线体使用,放在options中保险一些

    data() {
      return {
        // techType: 6, //  线体使用
        selectedLineBody: '', //  线体使用,用户选择的线体

        headContext: '工厂前台扫描是针对双面印的页面,而单面印对应的页面则是输出分拣',
        radio: '1',

        scanBarcode: '', //  用户扫描或输入的条形码

        workStationData: {},  //  工位的信息
        tableData: [],
        columnDesObjs: [
          { key: 'prodName', label: '序号' },
          { key: 'prodName2', label: 'SN' },
          { key: 'prodName3', label: '提示内容' }
        ],

        exceptionColumnDesObjs: [
          { key: 'prodName', label: '序号' },
          { key: 'prodName2', label: '订单编码' },
          { key: 'prodName3', label: '格子号' }
          // { label: '操作', key: 'operator', width: 180 }
        ],

        scanBarcodeArr: [], //  长度只能为 2
        loadingScan: false,

        loadingEmptyCellsBtn: false,
        emptyProvVisible: false,

        cellList: []  //  格子数据
      }
    },
    created() {
      this.getProductGridList() //  格子初始化
    },

    methods: {

      //  格子初始化
      async getProductGridList() {
        // await getProductGridList({ OrderFileId })
        try {
          const { Code, Result } = await getProductGridAutoList()
          if (+Code === ERR_OK) {
            this.cellList = Result
          }
        } catch (e) {
        }
      },

      //  清空全部的格子
      async emptyCells() {
        try {
          this.loadingEmptyCellsBtn = true
          const { Code, Messsage, Result } = await cleanProductPhotoGrid()
          if (+Code === ERR_OK) {
            this.$message.success(Messsage)
            this.emptyProvVisible = false
          }
        } catch (e) {
          console.log(e)
          // this.emptyProvVisible = false;
        } finally {
          setTimeout(() => {
            this.loadingEmptyCellsBtn = false
          }, 1000)
        }
      },

      //  用户使用扫描枪 或者 手动输入
      async scanOrInputBarcode(content) {
        //  用户回车时,存入数组
        if (this.scanBarcodeArr.length === 2) {
          //  有两个值时,请求服务端,如果不是这个产品的其他页面,
          //  服务端就会抛出异常,我这边就会执行删除掉数组中最后一个元素
          //  反之则通过,并且清空这个数组
          const firstScanCode = _.head(this.scanBarcodeArr)
          const lastScanCode = _.last(this.scanBarcodeArr)

          try {
            const { Code, Messsage, Result } = await scanBoardGridPhoto({
              orderFileStart: firstScanCode, orderFileEnd: lastScanCode
            })
            if (+Code === ERR_OK) {
              // 1 成功入站    2 扫描的头部不是第一张   3 扫描的尾部不是最后一张  4 扫描的尾部产品和头部产品类型不一致
              if (+Result === 1) {
                //  成功入站,清空临时数组里的全部 =>
              } else if (+Result === 2) {
                //  头部不是第一张,也是清空全部
              } else if (+Result === 3) {
                //  尾部不是最后一张,暂时无视
              } else if (+Result === 4) {
                //  提示用户 => 之后删除数组的最后一个元素 (直接操作,不需要关心视图响应式)
                this.scanBarcodeArr = _.dropRight(this.scanBarcodeArr)
              }

              //  调用初始化接口
              this.getProductGridList()
            }
          } catch (e) {

          }

        } else if (this.scanBarcodeArr.length === 1) {
          //  用户首次输入

        }

      }

    }
  }
</script>


<style lang="scss" scoped>
  @import "~@/styles/index.scss";

  .wrap {
    .header {

      padding: 10px 0;
    }

    .help {
      padding: 10px;
    }

    .main-wrap {
      padding: 10px;
      font-size: $mainSize;

      .main-left {

        .scan {
          .operator-area {
            padding: 15px 10px;
            border: 1px solid $borderColor;
            border-radius: 3px;
          }

          .condition-filter {
            /*margin: 30px 0;*/
            padding: 30px 0;
          }

          .album-grid {
            .album-grid-wrap {
              padding: 30px 0;
            }

          }
        }
      }

      .main-right {

      }

    }

  }

</style>
